import React, { Component } from 'react'
import { Text, View, SafeAreaView, StyleSheet, ScrollView,Image, TouchableOpacity, Alert  } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
export class Index extends Component {
  render() {
    return (
      <SafeAreaView style={[styles.container]}>
        <ScrollView> 
          <View style={[styles.avatar]}>
            <Image 
                source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
                style={{width: 80, height: 80, marginVertical: 10, borderRadius: 40}}
              /> 
          </View>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('AboutScreen')}
          >
            <View style={[styles.listItem]}>
              <View style={{flexDirection: 'row'}}>
                <Ionicons name={'information-circle-outline'} size={20} color={'#2d3'} />
                <Text style={{marginLeft: 10,fontSize: 18}}>关于</Text>
              </View>
              <Ionicons name={'chevron-forward-outline'} size={20} color={'#bbb'} />
            </View>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('CounterScreen')}
          >
            <View style={[styles.listItem]}>
              <View style={{flexDirection: 'row'}}>
                <Ionicons name={'settings-outline'} size={20} color={'#22d'} />
                <Text style={{marginLeft: 10,fontSize: 18}}>设置</Text>
              </View>
              <Ionicons name={'chevron-forward-outline'} size={20} color={'#bbb'} />
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Login')}
          >
            <View style={[styles.listItem]}>
              <View style={{flexDirection: 'row'}}>
                <Ionicons name={'settings-outline'} size={20} color={'#22d'} />
                <Text style={{marginLeft: 10,fontSize: 18}}>登录</Text>
              </View>
              <Ionicons name={'chevron-forward-outline'} size={20} color={'#bbb'} />
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('CounterScreen')}
          >
            <View style={[styles.listItem]}>
              <View style={{flexDirection: 'row'}}>
                <Ionicons name={'settings-outline'} size={20} color={'#22d'} />
                <Text style={{marginLeft: 10,fontSize: 18}}>退出</Text>
              </View>
              <Ionicons name={'chevron-forward-outline'} size={20} color={'#bbb'} />
            </View>
          </TouchableOpacity>
        </ScrollView>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start'
  },
  avatar: {
    flexDirection: 'row',
    justifyContent: 'center',
    borderBottomWidth: 1,
    borderColor: '#eee'
  },
  listItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    height: 50,
    paddingHorizontal: 20
  }
})
export default Index
